import * as THREE from 'three'
import { OrbitControls } from '../build/OrbitControls.js'
import mesh from './model.js';

// 创建一个三维场景
const scene = new THREE.Scene();
scene.add(mesh);

// 创建一个三位坐标轴
const axesHelper = new THREE.AxesHelper(120);
// 坐标轴添加到场景中
scene.add(axesHelper);

// width和height用来设置canvas画布尺寸
const width = window.innerWidth;
const height = window.innerHeight;

// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// 设置相机的位置
camera.position.set(400, 400, 400)
// 相机的视线 观察目标点坐标
camera.lookAt(0, 0, 0) //坐标原点


// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambient)

// 添加一个平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(0, 0, 200)
// directionalLight.target = mesh // 不设置是坐标原点
scene.add(directionalLight)
// 可视化平行光
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10, 0xffff00);
scene.add(dirLightHelper);


// 创建一个webGL渲染器
const renderer = new THREE.WebGLRenderer({
  // 启动抗锯齿，默认为false
  // antialias: true
});
renderer.setSize(width, height); // canvas画布宽高
// 获取屏幕像素比告诉three.js避免canvas渲染模糊
// renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x444444, 1);
renderer.render(scene, camera);
// 把渲染结果canvas画布添加到页面上。
document.body.appendChild(renderer.domElement);


// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement)
// 相机控件target表示相机目标点，默认为0,0,0，要与上面camera.lookAt一致，不然会闪
controls.target.set(0, 0, 0);
controls.update();
controls.addEventListener('change', function () {
  renderer.render(scene, camera);
})



window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 全屏下设置观察范围长宽比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix方法更新。
  camera.updateProjectionMatrix()
  renderer.render(scene, camera);
}


